<template>
  <div class="leftAside-container" ref="leftAside" v-if="data">
    <el-avatar
      src="http://img.wxcha.com/m00/73/a9/a9d773e6fa81bad515c31254418fd514.jpg"
      class="avatar"
      :size="150"
    ></el-avatar>
    <h3 class="title">{{ data.siteTitle }}</h3>
    <Menu />
    <Contact />
    <p class="footer">{{ data.icp }}</p>
  </div>
</template>

<script>
import Menu from "./Menu";
import Contact from "./Contact";
export default {
  components: {
    Menu,
    Contact,
  },
  computed: {
    data() {
      return this.$store.state.leftAside.data;
    },
  },
};
</script>
<style lang="less" scoped>
.leftAside-container {
  width: 100%;
  height: 100%;
  background: #000;
  padding: 20px 0px;
  text-align: center;
  box-sizing: border-box;
  overflow-y: auto;
}
.title {
  font-size: 1.2em;
  color: #fff;
  text-align: center;
  margin: 20px 0;
}
.footer {
  font-size: 14px;
  color: gray;
  text-align: center;
}
</style>